<script lang="ts" setup>
	import { HeartOutlined, MoreOutlined, UserOutlined, HeartFilled, MenuUnfoldOutlined } from "@ant-design/icons-vue"
	import { ref } from "vue"
	import { CommentApi } from '@/api/comment'
	import utils from '@/utils'
	import { useUserStore } from '@/stores/user';
	import { message } from 'ant-design-vue';
	const userStore = useUserStore()
	const props = defineProps(['articleId'])
	const emit = defineEmits(['reply'])
	let page = ref(1)
	let size = ref(15)
	let order = ref("new")
	let commentList = ref<any>([])
	let count = ref(0)
	const getComment = () => {
		CommentApi.getComment({
			articleId: props.articleId,
			size: size.value,
			page: page.value,
			order: order.value
		}).then((res : any) => {
			if (res.code == 1) {
				count.value = res.data.count
				commentList.value = [...res.data.list]
			}
		})
	}
	getComment()
	const reply = (commentId : number, nickname : string, userId : number) => {
		emit('reply', { commentId, nickname, userId })
	}
	const setOrder = (e : string) => {
		order.value = e
		page.value = 1
		commentList.value = []
		getComment()
	}
	const reset = () => {
		page.value = 1
		commentList.value = []
		getComment()
	}
	const setLove = (e : any) => {
		commentList.value.forEach((item : any) => {
			if (item.id == e.id) {
				item.love = e.love
				item.loveUser = e.loveUser
				return
			} else {
				item.children.list.forEach((item1 : any) => {
					if (item1.id == e.id) {
						item1.love = e.love
						item1.loveUser = e.loveUser
						return
					}
				})
			}
		})
	}
	const love = (id : number, index : number, index1 ?: number) => {
		CommentApi.love({
			id: id
		}).then((res : any) => {
			if (res.code == 1) {
				if (typeof index1 === "undefined") {
					commentList.value[index].love = res.data.love
					commentList.value[index].loveUser = res.data.loveUser
				} else {
					commentList.value[index].children.list[index1].love = res.data.love
					commentList.value[index].children.list[index1].loveUser = res.data.loveUser
				}
			}
		})
	}
	const isLove = (loveUser : string) => {
		let loveUserList = loveUser.split(",")
		if (userStore.userInfo == "" || loveUserList.indexOf(userStore.userInfo.id + "") == -1) {
			return false
		} else {
			return true
		}
	}
	const copyUrl = (commentId : number) => {
		var textArea = document.createElement("textarea");
		let index = window.location.href.indexOf('&commentId=')
		if (index > -1) {
			textArea.value = window.location.href.substring(0, index) + '&commentId=' + commentId;
		} else {
			textArea.value = window.location.href + '&commentId=' + commentId;
		}
		document.body.appendChild(textArea);
		textArea.select();
		document.execCommand("copy");
		document.body.removeChild(textArea);
		message.success('链接已复制');

	}
	defineExpose({
		reset,
		setLove
	})
</script>

<template>
	<div class="top">
		<div class="count">
			所有评论({{count}})
		</div>
		<div class="order">
			<a-dropdown :trigger="['click']">
				<div class="left-box">
					<MenuUnfoldOutlined class="icon" />
					<div class="text">
						<span v-if="order=='love'">最多赞</span>
						<span v-else-if="order=='new'">最新</span>
						<span v-else-if="order=='old'">最早</span>
					</div>
				</div>
				<template #overlay>
					<a-menu class="menu">
						<a-menu-item key="0" @click="setOrder('love')">最多赞</a-menu-item>
						<a-menu-item key="1" @click="setOrder('new')">最新</a-menu-item>
						<a-menu-item key="3" @click="setOrder('old')">最早</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown>
		</div>
	</div>
	<div class="comment-li" v-for="(item,index) in commentList">
		<a-avatar :size="40" class="li-left" :src="item.avatar">
			<template #icon>
				<UserOutlined />
			</template>
		</a-avatar>
		<div class="li-right">
			<div class="li-header">
				<div class="name">
					{{item.nickname}}
				</div>
				<heart-filled class="icon active" @click="love(item.id,index)" v-if="isLove(item.loveUser)" />
				<heart-outlined class="icon" @click="love(item.id,index)" v-else />
				<a-dropdown :trigger="['hover']">
					<more-outlined class="icon" />
					<template #overlay>
						<a-menu class="menu">
							<a-menu-item key="0" @click="copyUrl(item.id)">复制链接</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>
			<div class="li-content">
				<div class="text">
					<span v-html="item.content"></span>
				</div>
				<img :src="item.img" v-if="item.img" />
			</div>
			<div class="li-footer">
				<div class="time">{{utils.getFullTime(item.createTime)}}</div>
				<div class="like">{{item.love}}赞</div>
				<div class="reply" @click="reply(item.id,item.nickname,item.userId)">回复</div>
			</div>

			<!-- 回复开始 -->
			<div class="comment-li reply-li" v-for="(children,index1) in item.children.list">
				<a-avatar :size="40" class="li-left" :src="children.avatar">
					<template #icon>
						<UserOutlined />
					</template>
				</a-avatar>
				<div class="li-right">
					<div class="li-header">
						<div class="name">
							{{children.nickname}}
						</div>
						<heart-filled class="icon active" @click="love(children.id,index,index1)"
							v-if="isLove(children.loveUser)" />
						<heart-outlined class="icon" @click="love(children.id,index,index1)" v-else />
						<a-dropdown :trigger="['hover']">
							<more-outlined class="icon" />
							<template #overlay>
								<a-menu class="menu">
									<a-menu-item key="0" @click="copyUrl(item.id)">复制链接</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</div>
					<div class="li-content">
						<div class="text">
							<span v-html="children.content"></span>
						</div>
						<img :src="children.img" v-if="children.img" />
					</div>
					<div class="li-footer">
						<div class="time">{{utils.getFullTime(children.createTime)}}</div>
						<div class="like">{{children.love}}赞</div>
						<div class="reply" @click="reply(item.id,children.nickname,children.userId)">回复</div>
					</div>
				</div>
			</div>
			<div class="tips" v-if="item.children.count>3" @click="reply(item.id,item.nickname,item.userId)">
				查看所有{{item.children.count}}条回复</div>
		</div>
	</div>
	<a-empty v-if="count==0" description="暂无评论" class="empty" />
	<div class="page">
		<a-pagination v-model:current="page" :total="count" show-less-items :pageSize="size" hideOnSinglePage
			@change="getComment" />
	</div>
</template>

<style lang="scss" scoped>
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
		padding-top: 40px;
		border-top: 1px solid #e0e0e0;
		font-size: 14px;

		.count {
			color: #666;
		}

		.order {
			cursor: pointer;

			.left-box {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 8px;
					font-size: 16px;
				}

				.text {
					color: #000;
				}
			}
		}
	}

	.comment-li {
		display: flex;
		padding: 24px 0;
		font-size: 16px;
		width: 100%;

		.li-left {
			flex: 0 0 auto;
			margin-right: 12px;
		}

		.li-right {
			flex: 1;

			.li-header {
				display: flex;
				align-items: center;
				height: 40px;

				.name {
					margin-right: auto;
				}

				.icon {
					margin-left: 24px;
					font-size: 18px;
					color: #666;
					cursor: pointer;
				}

				.active {
					color: red;
				}
			}

			.li-content {
				margin-top: 6px;

				.text {}

				.text ::v-deep a {
					color: #1677ff;
					text-decoration:underline;
				}

				img {
					margin-top: 12px;
					max-width: 195px;
				}
			}

			.li-footer {
				display: flex;
				margin-top: 12px;
				color: #999;

				div {
					margin-right: 24px;
				}

				.time {}

				.like {}

				.reply {
					color: #666;
					cursor: pointer;
				}
			}
		}
	}

	.reply-li {
		padding: 24px 0 0 0;
	}

	.tips {
		padding-left: 50px;
		margin-top: 24px;
		font-size: 14px;
		color: #1677ff;
		cursor: pointer;
	}

	.empty {
		padding-top: 100px;
	}

	.page {
		margin-top: 40px;
		display: flex;
		justify-content: center;
	}
</style>